<template>
    <!-- <hooyn-nav-bar
    class="header"
    leftIcon="arrow-left"
    title="企业出海"
    leftIconfont="true"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  /> -->
  
    <!-- tab切换 -->
   
    <div class="listf">
        <div class="top">
    <!-- <div class="list-top">
        <div class="top-left">
            <van-icon name="arrow-left" color="#fff" size="16px" @click="rouitem" />
        </div>
        <div class="top-right">
            企业出海
        </div>
    </div> -->
    <ul class="tab-il">
            <li @click="tab(1)" :class="data.index==1?'tabinde':''">海外拓客</li>
            <li @click="tab(2)" :class="data.index==2?'tabinde':''">跨镜物流</li>
            <li @click="tab(3)" :class="data.index==3?'tabinde':''">出口信保</li>
            <li @click="tab(4)" :class="data.index==4?'tabinde':''">海外品宣</li>
    </ul>
  </div>
    <!-- 出口信保 -->
    <div class="tab" v-if="data.index==3">
            <img src="../../assets/ion28.png" class="ion28">
            <div class="item">
                &nbsp; &nbsp; &nbsp;依托中国出口信用保险公司，服务对外贸易与对外投资合作，通过提供各类保险服务，主要服务涵盖中长期出口信用保险、海外投资保险、短期出口信用保险、国内信用保险等，同时提供与出口信用保险相关的信用担保、再保险、应收账款管理、商账追收以及信息咨询等全方位服务，从而充分发挥其在促进对外经贸发展中的重要作用。
            </div>
            <div class="tlele">
                产品服务
            </div>
            <img src="../../assets/ion29.png" class="ion28 ion29">
            <div class="item-wzi">短期出口信用保险</div>
            <div class="item-wzz">
                为以信用证、非信用证方式从中国出口的货物或服多提供应收账款收汇风险保障。承保业务的信用期限股为一年以内，最长不超过两年。
            </div>
            <div class="tlele">
                联系我们
            </div>
            <div class="imgs">
                <div class="kf">
                <div class="kf-left">
                    <img src="../../assets/kefu.png" alt="">
                </div>
                <div class="kf-right">
                    <div class="item-kf">18680363832</div>
                    <div class="item-kf1">谢经理</div>
                </div>
               </div>
               <div class="img-list">
                <img src="../../assets/3909.png" alt="">
                <div class="sys">中国出口信用保险公司<br> 深圳分公司宝安营业部 谢经理</div>
               </div>
            </div>
           
    </div>
    
    <!-- 海外品宣 -->
    <div class="tab" v-if="data.index==4">
            <img src="../../assets/ion31.png" class="ion28">
            <div class="item">
                &nbsp; &nbsp; &nbsp;北京微瑞思创成立于2012年，2015年在新三板挂牌上市，近3年总营收过6亿元人民币。
            </div>
            <div class="item">
                &nbsp; &nbsp; &nbsp;公司主要提供以大数据分析技术为基础的智能营销服务，从2019年布局短视频及直播业务，各主流视频平台均有布局。2020年布局跨境电商及直播业务，目前为TikTok头部TSP/MCN机构，分公司遍布欧洲、北美和东南亚等主流跨境电商市场。
            </div>
            <div class="tlele">
                海外品牌宣传渠道
            </div>
            <div class="tab-list">
                <ul>
                    <li>
                        <div class="list-left">
                            <img src="../../assets/ion31.png" class="ion31">
                        </div>
                        <div class="list-right">
                            <div class="item">TikTok达人营销/达人分发</div>
                            <div class="tioke">服务于TikTok shop的达人选品&品牌营销的专业团队。</div>
                        </div>
                    </li>
                    <li>
                        <div class="list-left">
                            <img src="../../assets/ion32.png" class="ion31">
                        </div>
                        <div class="list-right">
                            <div class="item">TikTok达人基地</div>
                            <div class="tioke">依托美国各地优势和达人特性，激活TikTok内容创作者,建立线上线下沟通平台。</div>
                        </div>
                    </li>
                    <li>
                        <div class="list-left">
                            <img src="../../assets/52127706.png" class="ion31">
                        </div>
                        <div class="list-right">
                            <div class="item">海外品牌代运营服务</div>
                            <div class="tioke">搭建品牌自媒体矩阵，图文、视频、直播引导用户至独立站，达人合作增强品牌影响力。</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="tlele">
                联系我们
            </div>
            <div class="imgs">
                <div class="kf">
                <div class="kf-left">
                    <img src="../../assets/kefu.png" alt="">
                </div>
                <div class="kf-right">
                    <div class="item-kf">15226617006</div>
                    <div class="item-kf1">服务热线</div>
                </div>
               </div>
               <div class="img-list">
                <img src="../../assets/1126.png" alt="">
                <div class="sys">扫一扫 联系我们</div>
               </div>
            </div>
           
    </div>
    <!-- 跨镜物流 -->
    <div class="tab" v-if="data.index==2">
            <img src="../../assets/ion34.png" class="ion28">
            <div class="item">
                &nbsp; &nbsp; &nbsp;整合物流服务商资源，提供货物国际运输、报关清关、海外仓储、配送一站式跨境物流服务，有效提升综合物流效率，帮助企业降低物流成本，让外贸企业做外贸变得更加简单。
            </div>
            <div class="tlele">
                跨镜物流服务
            </div>
            <img src="../../assets/ion.png" class="ion28 ion29">
            <div class="item-w1i">九立供应链股份有限公司</div>
            <div class="item-w2z">
                运用互联网思维，借助智能关务云服务平台，整合多产品通道，采用云技术、大数据打造AI智能报关等一站式的服务平台。
            </div>
            <div class="item-w2z">业务咨询：袁经理 13048945718</div>
           
    </div>
    <!-- 海外拓客 -->
    <div class="tab" v-if="data.index==1">
            <img src="../../assets/ion35.png" class="ion28">
            <div class="item">
                &nbsp; &nbsp; &nbsp;“波波知了”海外拓客服务涵盖了全球200+国家地区上百亿条贸易数据，致力于帮助企业快捷开发新客户、深度分析目标客户，轻松掌握外贸商机。
            </div>
            <div class="tlele">
                海外拓客服务
            </div>
            <div class="tab-list">
                <ul>
                    <li>
                        <div class="list-left">
                            <img src="../../assets/ion38.png" class="ion31 ion38">
                        </div>
                        <div class="list-right">
                            <div class="item list">快捷开发新客户</div>
                            <div class="tioke list1">支持产品关键词、HS编码(海关编码)、企业名称多维度搜索，迅速</div>
                        </div>
                    </li>
                    <li>
                        <div class="list-left">
                            <img src="../../assets/ion36.png" class="ion31 ion38">
                        </div>
                        <div class="list-right">
                            <div class="item list">深度分析目标客户</div>
                            <div class="tioke list1">可查询历史进出口数据及最新贸易动态，支持订阅贸易数据，关注交易频率，灵活调整沟通策略。</div>
                        </div>
                    </li>
                    <li>
                        <div class="list-left">
                            <img src="../../assets/ion37.png" class="ion31 ion38">
                        </div>
                        <div class="list-right">
                            <div class="item list">深度贸易分析报告</div>
                            <div class="tioke list1">提供深层次的贸易数据分析，解析目标买家的供应链情况，供应链数据的深度和广度提升60%以上。</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="imgs">
                <div class="kf">
                <div class="kf-left">
                    <img src="../../assets/kefu.png" alt="">
                </div>
                <div class="kf-right">
                    <div class="item-kf"><span>刘伟 </span> 15915356855</div>
                    <div class="item-kf"><span>周妤</span>  13266845698</div>
                    <!-- <div class="item-kf1">谢经理</div> -->
                </div>
               </div>
               <div class="img-list ov">
                <img src="../../assets/ion54.png" alt="">
               </div>
            </div>
           
    </div>
    </div>
</template>
<script setup >
const router = useRouter()
    const data =reactive({
        index:1
    })
    const tab = (item) => {
        data.index=item
    }
    const rouitem = () => {
        router.push({
    path: `/`
  })
    }   
onMounted(() => {
    data.index =1
})
</script>
<style lang="scss" scoped>
.top{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    .list-top{
        display: flex;
        height: 44px;
        line-height: 44px;
        background-color: #68A0F7;
        position: relative;
        .top-left{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 111;
            width: 10%;
            text-align: center;
            font-size: 1rem;
        }
        .top-right{
            width: 100%;
            font-size: 1rem;
            text-align: center;
            color: #fff;
        }
    }
}
    .tab-il{
        background-color: #F5F9FC;
        display: flex;
        width: 100%;
        li{
            width: 25%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-right: 0px solid #ccc;
            height: 2.5rem;
            font-size: 1rem;
            text-align: center;
            line-height: 2.5rem;
            &:nth-child(4){
                border-right: 1px solid #ccc;
            }
        }
        .tabinde{
            background-color: #D1F1FF;
            color: #4D9DE7;
        }
    }
    .listf{
        position: relative;
        // height: 100%;
        // min-height: 100vh;
        overflow-y: auto;
    background-color: #F5F9FC;
    }
    .tab{
        margin-top: 2.5rem;
        width: 100%;
        padding: 1rem 1.2rem;
        box-sizing: border-box;
        .ion28{
            width: 100%;
            height: 14rem;
        }
        .item{
            margin-top: .8rem;
            font-size: .9rem;
            line-height: 1.4rem;
            color: #777;
        }
        .tlele{
            font-size: 1.1rem;
            font-weight:500;
            color: #4D9DE7;
            line-height: 2.5rem;
            border-bottom: 1px solid #ccc;
        }
        .item-wzi{
            font-size: 1rem;
            font-weight: 500;
            color: #8E9091;
            margin: .4rem 0 ;
        }
        .item-wzz{
            font-size: .9rem;
            font-weight: 500;
            color: #9FA0A0;
            line-height: 1.4rem;
        }
        .item-w1i{
            color: #1C1C1C;
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: .3rem;
        }
        .item-w2z{
            color: #A0A2A3;
            font-size: .9rem;
            line-height: 1.3rem;
        }
        .ion29{
            margin-top: 1rem;
        }
        .imgs{
            margin-top: 1rem;
            background-color: #fff;
            border-radius: 2rem;
            width: 100%;
            display: flex;
            // justify-content: center;
            flex-direction: column;
            align-items: center;
            padding:  2rem 0;
            .ion30{
                width: 22rem;
                height: 23rem;
            }
            .list-img{
                margin: 4rem 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 9.5rem;
                    height: 9.5rem;
                }
                p{
                    font-size: 1rem;
                    font-weight: 500;
                    color: #A9ABAC;
                }
            }
            .kf{
                display: flex;
                justify-content: center;
                width: 70%;
                padding-bottom: 1rem;
                margin-bottom: 1rem;
                border-bottom: 1px solid #939393 ;
                .kf-left{
                    
                    img{
                        width: 2.4rem;
                        height: 2.5rem;
                        margin-right: 1rem;
                    }
                }
                .kf-right{
                    .item-kf{
                        font-size: 1.2rem;
                        font-weight: 500;
                        color: #E74D48;
                        span{
                            color: #939393;
                        }
                    }
                    .item-kf1{
                        font-size: 1.1rem;
                        font-weight: 500;
                        color: #939393;
                    }
                   
                }
            }
            .img-list{
               
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 10.8rem;
                img{
                    width: 11rem;
                    height: 11rem;
                }
                .sys{
                    margin: 1rem 0 ;
                    text-align: center;
                    font-size: 1rem;
                    width: 14rem;
                        font-weight: 500;
                        color: #939393;
                }
            }
            .ov{
                overflow: hidden;
            }
              
        }
        .tab-list{
            margin-top: 1rem;
            ul{
                li{
                    margin-bottom: 1rem;
                    display: flex;
                    .list-left{
                        margin-right: .4rem;
                        img{
                            width: 11rem;
                            height: 8rem;
                        }
                        .ion38{
                            height: 7rem; 
                        }
                    }
                    .list-right{
                        .item{
                            margin-top: .3rem;
                            color: #656566;
                            font-size: 1rem;
                            font-weight: 500;
                        }
                        .list{
                            color: #4D9DE7;
                            margin-top: .1rem;
                        }
                       
                        .tioke{
                            margin-top: .5rem;
                            line-height: 1.2rem;
                            font-size: .9rem;
                            font-weight: 500;
                            color: #BBBDBE;
                        }
                        .list1{
                            color: #777;
                            font-size: .8rem;
                            line-height: 1.2rem;
                        }
                    }
                }
            }
        }
    }
</style>